<template>
	<div>
		<!-- 遮罩层 -->
		<div class="zhezhao" v-show="!isComment" @click="isComment = !isComment" @touchmove.prevent></div>
		<!-- 占位符1 -->
		<div class="placehoder1"></div>
			<div class="mycomment">
				<!-- TYPE1简单展示 -->
				<div class="type1" v-show="isComment">
					<input type="text" class="text" placeholder="跟帖..." @click="inputFn" v-model.trim="content">
					<span class="iconGroup">
						<i class="iconfont icon-pinglun" @click="$router.push(`/article_comment/${article.id}`)"></i>
						<em>{{article.comment_length}}</em>
					</span>
					<span class="iconGroup" @click="postLike">
						<i class="iconfont icon-shoucang1" :class="{isStar: this.article.has_star}"></i>
					</span>
			
					<span class="iconGroup">
						<i class="iconfont icon-fenxiang"></i>
					</span>
				</div>
			
				<!-- TYPE2用户输入展示 -->
				<div class="type2" v-show="!isComment">
					<textarea placeholder="我想说..." ref="textarea" v-model.trim="content"></textarea>
					<div class="btnGroup">
						<span class="TYPE2btn" @click="sendBtn">发送</span>
					</div>
				</div>
			</div>
		<!-- 占位符2 -->
		<!-- <div class="placehoder2" v-show="!isComment"></div> -->
		
		<!-- 主体 -->

	</div>
</template>

<script>
	import {
		updatePostcollectApi
	} from '../apis/news.js'
	export default {
		props: {
			article: {
				type: Object,
				required: true,
			},
			
			commentTemp: Object
			
		},


		data() {
			return {
				isComment: true,
				content: ''
			}
		},
		
		watch:{
			isComment(e){
				let body = document.getElementsByTagName('body')[0];
				//let placehoder = document.getElementsByClassName('placehoder1')[0];
				if(!e){
					body.style.overflow = 'hidden';
					//placehoder.style.height = '116px'
					/* window.scrollTo({
						top: 10000,
						behavior: 'smooth'
					}) */
				}else if(e){
					body.style.overflow = 'scroll';
					//placehoder.style.height = '55px'
				}
			},
			
			commentTemp: {
				deep: true,
				handler(){
					if(this.commentTemp){
						this.content = '@' + this.commentTemp.user.nickname + '：'
					}
				}
			}
		},
		
		methods: {
			inputFn(){
				this.isComment = false;
				/* 等待DOM树更新后操作 */
				this.$nextTick(() => {
					this.$refs.textarea.focus();
				})
				
				
			},
			
			//发送按钮
			sendBtn(){
				this.$emit('sendClick' , this.content , (res) => {
					this.content = res;
				});
				this.isComment = true;
			},
			
			async postLike() {
				await updatePostcollectApi(this.$route.params.id)
					.then((res) => {
						if (res.data.message === '收藏成功') {
							this.$toast('收藏成功！')
						} else {
							this.$toast('取消收藏！')
						}
						this.article.has_star = !this.article.has_star;
					})
			}
		},


	}
</script>

<style lang="less" scoped>
	
	.zhezhao{
		position: fixed;
		bottom: 110px;
		left: 0;
		right: 0;
		background-color: #888888;
		height: 100%;
		width: 100%;
		opacity: 80%;
	}
	
	.placehoder1{
		height: 55px;
		width: 100%;
		position: relative;
		bottom: 0;
		
	}
	
/* 	.placehoder2{
		height: 85px;
		width: 100%;
		background-color: blue;
		
	} */
	.isStar {
		background-color: #ff3100;
		color: #ffffff;
		border-radius: 50%;
	}

	.mycomment {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;

		.type1 {
			display: flex;
			height: 35px;
			padding: 10px;
			justify-content: center;
			align-items: center;

			input {
				flex: 1;
				border-radius: 10px;
				height: 30px;
				border: 0;
				background-color: #e7e7e7;
				text-align: left;
				/* text-indent: 1em; */
				padding: 0 10px;
				margin: 0 10px;
			}

			.iconGroup {
				width: 40px;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}

			.iconfont {
				font-size: 20px;
			}

			em {
				font-size: 15px;
				background-color: #ff3100;
				position: absolute;
				left: 18px;
				top: 0;
				color: #ffffff;
				border-radius: 7px;
				padding: 0 3px;
			}
		}

		.type2 {
			display: flex;
			padding: 10px;

			textarea {
				flex: 1;
				height: 85px;
				background-color: #e7e7e7;
				border: 0;
				border-radius: 10px;
				padding: 5px;
			}

			.btnGroup {
				display: flex;
				flex-direction: column-reverse;
				padding: 10px;

				.TYPE2btn {
					width: 60px;
					height: 25px;
					background-color: #ff3100;
					border-radius: 10px;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

	}
</style>
